import { Meta, Intro } from '../../.storybook/components';

<Meta title="Introduction/Browser Support" />

# Browser Support

<Intro>
  Circuit UI supports all modern browsers. Polyfills and transpiling may be
  required if your app needs to support legacy browsers.
</Intro>

## Browser support policy

Circuit UI supports all browsers that support [dynamic module imports](https://caniuse.com/es6-module-dynamic-import) and [`Object.fromEntries`](https://caniuse.com/mdn-javascript_builtins_object_fromentries):

| Browser          | Version |
| ---------------- | ------- |
| Chrome           | 73+     |
| Firefox          | 67+     |
| Edge             | 79+     |
| Safari iOS       | 12.2+   |
| Safari macOS     | 12.1+   |
| Opera            | 60+     |
| Samsung Internet | 11.1+   |

Circuit UI does not need to be transpiled when bundling your application (unless you need to support legacy browsers: see below).

_Did you notice a browser support bug in a Circuit UI component? [Open an issue!](https://github.com/sumup-oss/circuit-ui/issues/new?labels=&template=report-a-bug.md)_

## Supporting legacy browsers

If your app needs to support older browsers such as Internet Explorer, you will need to transpile Circuit UI when bundling your application. This can be achieved in different ways depending on the framework/bundler that you use. For example, if using Next.js, you can use the [`next-transpile-module`](https://github.com/martpie/next-transpile-modules) plugin.

You may also need to include polyfills in your bundled application. Some of the newer JavaScript and CSS features that Circuit UI uses are:

- [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
- [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)
- [Object.entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
- [CSS object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)

_The list above is not exhaustive and depends on which Circuit UI components are used._

The correct way to polyfill these features varies depending on your environment. For example, frameworks such as Next.js include many of these polyfills by default. Always test your app in your target browsers, and include polyfills if necessary.
